<script setup>
import {ref} from "vue";
import dayjs from "dayjs";
import {useUserStore} from "@/stores/user";
import {addApplication} from "@/apis/application";
import SelectMachineComponent from "@/components/Machine/SelectComponent.vue";
import {Message} from "tdesign-mobile-vue";

const dateStart = ref(dayjs().format('YYYY-M-D HH:mm'))
const dateEnd = ref('')
const visibleStart = ref(false)
const visibleEnd = ref(false)
const machineVisible = ref(false)
const store = useUserStore()
const machine = ref({
  id: 0,
  name: ""
})

function onDateStartConfirm(val) {
  dateStart.value = val
  visibleStart.value = false;
}

function onDateEndConfirm(val) {
  dateEnd.value = val
  visibleEnd.value = false;
}

function selectMachineConfirm(item) {
  machine.value = item;
  machineVisible.value = false;
}

function submitFunc() {
  console.log(dayjs(dateStart.value).unix(), dayjs(dateEnd.value).unix())
  if (dateStart.value == '' || dateEnd.value == '') {
    Message.error({
      content: "加工截止时间与加工起始时间不能为空",
      context: document.querySelector('main'),
      offset: [8, 8]
    })
    return;
  } else if (dayjs(dateStart.value).unix() > dayjs(dateEnd.value).unix()) {
    Message.error({
      content: "加工截止时间必须大于加工起始时间",
      context: document.querySelector('main'),
      offset: [8, 8]
    })
    return;
  } else if (machine.value.id < 1) {
    Message.error({
      content: "预约的机器不能为空",
      context: document.querySelector('main'),
      offset: [8, 8]
    })
    return;
  }
  const formData = {
    title: "加工预约单" + dayjs().format("YYYYMMDDHHmmss") + store.user.id,
    user_id: store.user.id,
    record_user_id: store.user.id,
    start_time: dateStart.value,
    end_time: dateEnd.value,
    machine_list: machine.value,
  }
  console.log(formData)
  return;
  addApplication(formData)
      .then(res => {
        console.log(res.data);
      })
}
</script>

<template>
  <main>
    <t-cell-group title="预约单">
      <t-form label-width="300" @submit="submitFunc">
        <t-form-item requiredMark label="加工起始时间">
          <t-input readonly borderless v-model="dateStart" @click="visibleStart=true"></t-input>
          <t-popup v-model="visibleStart" placement="bottom">
            <t-date-time-picker
                :value="dateStart"
                mode="minute"
                title="选择日期"
                :start="dayjs().format('YYYY-M-D HH:mm')"
                format="YYYY-MM-DD HH:mm"
                @confirm="onDateStartConfirm"
                @cancel="visibleStart=false"
            />
          </t-popup>
        </t-form-item>
        <t-form-item requiredMark label="加工截止时间">
          <t-input readonly borderless v-model="dateEnd" @click="visibleEnd=true"></t-input>
          <t-popup v-model="visibleEnd" placement="bottom">
            <t-date-time-picker
                :value="dateEnd"
                mode="minute"
                title="选择日期"
                :start="dateStart"
                format="YYYY-MM-DD HH:mm"
                @confirm="onDateEndConfirm"
                @cancel="visibleEnd=false"
            />
          </t-popup>
        </t-form-item>
        <t-form-item requiredMark label="所用机床">
          <t-input readonly borderless @click="machineVisible=true" v-model="machine.name"></t-input>
        </t-form-item>
        <t-form-item requiredMark label="预约人">
          <t-input readonly borderless v-model="store.user.profile.name"></t-input>
        </t-form-item>

        <t-form-item>
          <t-button theme="primary" type="submit" block>提交</t-button>
        </t-form-item>
      </t-form>
    </t-cell-group>


    <t-popup v-model="machineVisible" placement="bottom">
      <div class="header">
        <div class="btn btn--cancel" @click="machineVisible=false">
          <t-icon name="chevron-down"></t-icon>
        </div>
        <div class="title">请选择机床</div>
        <div class="btn btn--confirm" @click="machineVisible=false"></div>
      </div>
      <SelectMachineComponent @confirm="selectMachineConfirm"></SelectMachineComponent>
    </t-popup>


  </main>
</template>

<style scoped lang="less">
.header {
  display: flex;
  align-items: center;
  height: 116rpx;
}

.title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
}

.btn {
  font-size: 16px;
  padding: 16px;
}

.btn--cancel {
  color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
}

.btn--confirm {
  color: #0052d9;
  width: 20px;
  height: 20px;
}
</style>